<template>
  <div id="Receiving">
    <root name="Receiving" backgroundColor="#E0E0E0">
      <SafeHeader
        v-bind="{
          title: '收货',
          fixedTop: true,
        }"
      >
      </SafeHeader>
      <div>
        <v-container class="receiving_top">
          <v-row>
            <v-col cols="12">
              <v-card outlined>
                <v-card-subtitle class="receiving_top_List">
                  <v-row>
                    <v-col cols="3">物料编码</v-col>
                    <v-col>{{ receivingOrign.itemCode }}</v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="3">物料名称</v-col>
                    <v-col>{{ receivingOrign.itemName }}</v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="3">计划数量</v-col>
                    <v-col>{{ receivingOrign.expectQuantity }}</v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="3">已收数量</v-col>
                    <v-col>{{ receivingOrign.acceptQuantity }}</v-col>
                  </v-row>
                </v-card-subtitle>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
        <v-container class="receiving_bottom py-2">
          <v-row>
            <v-col cols="12">
              <v-card outlined>
                <v-card-subtitle class="receiving_bottom_List">
                  <v-row class="mt-0">
                    <v-col cols="3" class="py-1 d-flex align-center"
                      >容器</v-col
                    >
                    <v-col class="py-1">
                      <v-text-field
                        class="my-0"
                        dense
                        hide-details
                        outlined
                        v-model="inputForm.generate"
                      >
                        <template v-slot:append>
                          <v-btn
                            small
                            color="orange"
                            dark
                            @click="createGenerate"
                            >生成</v-btn
                          ></template
                        >
                      </v-text-field></v-col
                    >
                  </v-row>
                  <v-row>
                    <v-col cols="3" class="d-flex align-center py-1"
                      >收货数量</v-col
                    >
                    <v-col>
                      <v-text-field
                        dense
                        hide-details
                        outlined
                        v-model="inputForm.quantity"
                      ></v-text-field>
                    </v-col>
                  </v-row>
                  <v-row>
                    <v-col cols="3" class="d-flex align-center py-1"
                      >收货库位</v-col
                    >
                    <v-col>
                      <v-text-field
                        dense
                        hide-details
                        outlined
                        v-model="inputForm.cell"
                      >
                        <template v-slot:append>
                          <v-btn
                            small
                            color="orange"
                            dark
                            @click="createLocation"
                            >生成</v-btn
                          ></template
                        >
                      </v-text-field></v-col
                    >
                  </v-row>
                </v-card-subtitle>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
        <v-bottom-navigation dark fixed grow>
          <v-row class="ma-0">
            <v-col class="pa-0"
              ><v-btn
                block
                style="height: 100%; font-color: #fff"
                color="blue-grey"
                @click="goBack"
                >返回</v-btn
              ></v-col
            >
            <v-col class="pa-0"
              ><v-btn
                block
                style="height: 100%"
                color="#193690"
                @click="receivingSend"
                >确认</v-btn
              ></v-col
            >
          </v-row>
        </v-bottom-navigation>
      </div>
      <v-bottom-sheet v-model="sheet" persistent>
        <v-sheet class="text-center" height="30px">
          <v-btn class="mt-1" text color="red" @click="sheet = !sheet">
            关闭
          </v-btn>
        </v-sheet>
        <v-list>
          <v-list-item
            v-for="cell in cellList"
            :key="cell.cellId"
            @click="cellSelect(cell)"
          >
            <v-list-item-title>{{ cell.cellName }}</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-bottom-sheet>
    </root>
  </div>
</template>

<script>
import Root from "@/components/Root.vue";
import SafeHeader from "@/components/safeHeader_wms.vue";
import wms from "@/utils/business_wms";
import { apiList } from "@/static/apiList";

export default {
  name: "Receiving",
  components: {
    Root,
    SafeHeader,
  },
  data() {
    return {
      sheet: false,
      // 传送接收属性
      receivingOrign: {
        itemCode: "",
        itemName: "",
        expectQuantity: "",
        acceptQuantity: "",
      },
      //   填写的表单数据
      inputForm: { generate: "", quantity: "", cell: "" },
      //   仓库列表
      cellList: [],
    };
  },
  methods: {
    goBack() {
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.closeWin();
      } else {
        this.$root.api.api.closeWin();
      }
    },
    // 生成容器
    createGenerate() {
      console.log("生成容器");
      let generateType = apiList.codeRule["box"];
      wms
        .get({ url: "/box/infos/generate", data: { boxType: generateType } })
        .then((res) => {
          console.log(res);
          if (res.status == 200 && res.data.code == 200) {
            this.inputForm.generate = res.data.data;
            console.log(this.inputForm.generate, res.data.data);
          }
        });
    },
    // 生成库位
    createLocation() {
      console.log("生成库位");
      wms
        .get({
          url: "/cell/infos/findByCellUserTypes",
          data: { wareId: 284, cellUseTypes: 0 },
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200 && res.data.code == 200) {
            this.cellList = res.data.data.list;
            this.sheet = true;
          }
        });
    },
    // 选择库位
    cellSelect(cell) {
      console.log(cell);
      this.inputForm.cell = cell.cellCode;
      this.sheet = false;
    },
    receivingSend() {
      console.log(111);
      let receivingForm = Object.assign(this.receivingOrign, this.inputForm);
      console.log(receivingForm);
      if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
        window.api.sendEvent({
          name: "receivingSend",
          extra: {
            receiving: receivingForm,
          },
        });
      } else {
        this.$root.api.api.sendEvent({
          name: "receivingSend",
          extra: {
            receiving: receivingForm,
          },
        });
      }
    },
  },
  mounted() {
    let pageParam;
    if (window.navigator.userAgent.toLowerCase().includes("apicloud")) {
      pageParam = window.api.pageParam;
    } else {
      pageParam = this.$root.api.api.pageParam;
    }

    this.receivingOrign = pageParam.Receiving;
    console.log(pageParam);
  },
};
</script>


<style lang="sass" scoped>
.receiving_bottom_List
  .v-text-field
    ::v-deep.v-input__prepend-inner
      margin-top: 8px
      display: flex
      font-size: 0.875rem
      min-width: 4rem
      .v-input__append-inner
        .v-btn
          padding: 0 10px
          margin-bottom: 2px

          .col
            padding-bottom: 6px
</style>